<template>
  <div id="asset-detail" class="component-wrap">
    <div class="asset-title">
      <div class="asset-title-content">
        <img src="../../assets/ic_titlebar_back@3x.png" class="title-back" @click="goBack"/>
        <h2>资产详情</h2>
      </div>
    </div>
    <ul class="asset-detail-tab clearfix">
      <li @click="changeTab(index)" v-for="(item,index) in tabItem" :key="index">
        <span :class="{ 'hover':index===cur }">{{item}}</span>
      </li>
    </ul>
    <div class="asset-detail-content">
      <div v-if="cur===0">
        <div class="basic-info">
          <h2>基本信息</h2>
          <table>
            <tr>
              <td>资产编码：</td>
              <td>09230WWEO-908-UJ8</td>
            </tr>
            <tr>
              <td>资产名称：</td>
              <td>戴尔一体机台式机电脑</td>
            </tr>
            <tr>
              <td>资产大类：</td>
              <td>办公用品</td>
            </tr>
            <tr>
              <td>资产小类：</td>
              <td>电脑</td>
            </tr>
            <tr>
              <td>资产状态：</td>
              <td>正常</td>
            </tr>
            <tr>
              <td>供应商：</td>
              <td>青岛聚好联科技有限公司</td>
            </tr>
            <tr>
              <td>品牌：</td>
              <td>戴尔Dell</td>
            </tr>
            <tr>
              <td>规格型号：</td>
              <td>27-98WQP</td>
            </tr>
            <tr>
              <td>数量：</td>
              <td>20</td>
            </tr>
            <tr>
              <td>计量单位：</td>
              <td>台</td>
            </tr>
            <tr>
              <td>购置日期：</td>
              <td>2019-03-18</td>
            </tr>
          </table>
        </div>
        <div class="basic-info">
          <h2>自定义属性</h2>
          <table>
            <tr>
              <td>自定义属性1</td>
              <td>黑色</td>
            </tr>
            <tr>
              <td>自定义属性2</td>
              <td>产品开发小组</td>
            </tr>
            <tr>
              <td>自定义属性3</td>
              <td>配件键盘鼠标</td>
            </tr>
          </table>
        </div>
        <img src="../../assets/edit@3x.png" class="asset-edit"/>
      </div>
      <div v-if="cur===1">
        <div class="basic-info" v-for="item,index in arr">
          <div class="ope-info">
            <div class="ope-info-top clearfix">
              <span>{{item.time}}</span>
              <img src="../assets/label2_scrap@3x.png" />
            </div>
            <div class="ope-info-bottom clearfix">
              <span>{{item.name}}</span>
              <img v-if="item.isShow" src="../assets/arrow_down@3x.png" @click="showDetails(item)" />
              <img v-if="!item.isShow" src="../assets/arrow_up@3x.png" @click="showDetails(item)" alt="">
            </div>
          </div>
          <ul id="downlist" v-if="!item.isShow">
            <li>
              <p>故障原因:</p>
              <span>此处填写报修的原因</span>
            </li>
            <li>
              <p>维修金额:</p>
              <div class="price"><span>￥</span><p>8542</p><span>.28</span></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: "assetDetail",
    data:function(){
      return {
        cur: 0,
        tabItem: ["资产信息","操作记录"],
        arr:[
          {time:'2019-3-18',name:'马勇刚',status:'0',isShow:true},
          {time:'2019-3-18',name:'马勇刚',status:'0',isShow:true},
          {time:'2019-3-18',name:'马勇刚',status:'0',isShow:true}
        ]
      }
    },
    methods: {
      goBack:function(){
        this.$router.go(-1);
      },
      changeTab:function(idx){
        this.cur = idx
      },
      showDetails(item){
       item.isShow = !item.isShow;
      }
    },
  }
</script>

<style scoped>
  #asset-detail .asset-title {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 2;
  }
  #asset-detail .asset-title-content {
    position: relative;
    width: 100%;
    height: 4rem;
    background: #00CCCC;
    background-image: linear-gradient(-136deg, #2BB1FF 0%, #00CCCC 100%);
  }
  #asset-detail .asset-title-content h2 {
    width: 100%;
    height: 4rem;
    text-align: center;
    line-height: 4rem;
    font-size: 1.7rem;
    color: #fff;
    font-weight: normal;
  }
  #asset-detail .asset-title-content .title-back {
    position: absolute;
    top: 50%;
    left: 1rem;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
  }
  #asset-detail .asset-detail-tab {
    position: fixed;
    left: 0;
    right: 0;
    top: 4rem;
    width: 100%;
    height: 4rem;
    background: #fff;
    overflow: hidden;
    z-index: 2;
    -webkit-box-shadow: 0 0 0.5rem 0 rgba(166,187,187,0.45);
    -moz-box-shadow: 0 0 0.5rem 0 rgba(166,187,187,0.45);
    -ms-box-shadow: 0 0 0.5rem 0 rgba(166,187,187,0.45);
    -o-box-shadow: 0 0 0.5rem 0 rgba(166,187,187,0.45);
    box-shadow: 0 0 0.5rem 0 rgba(166,187,187,0.45);
  }
  #asset-detail .asset-detail-tab li{
    float: left;
    width: 50%;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    font-size: 1.4rem;
    color: #999;
  }
  #asset-detail .asset-detail-tab li .hover {
    color: #4A4A4A;
    font-weight: bold;
    padding: 0.6rem 0;
    border-bottom: 0.2rem solid #0CC;
    font-weight: bold;
  }
  #asset-detail .asset-detail-content {
    width: 100%;
    margin-top: 8rem;
    overflow: hidden;
    padding-bottom: 6rem;
  }
  #asset-detail .asset-detail-content .basic-info {
    background: #fff;
    margin-top: 1.5rem;
    overflow: hidden;
  }
  #asset-detail .basic-info h2{
    font-size: 1.4rem;
    color: #171717;
    letter-spacing: 0.32px;
    border-left: 0.2rem solid #0CC;
    padding-left: 0.5rem;
    margin: 0.8rem 0 0.8rem 1.5rem;
  }
  #asset-detail .basic-info table {
    width: 100%;
  }
  #asset-detail .basic-info table tr {
    height: 4rem;
    line-height: 4rem;
    font-size: 1.4rem;
    letter-spacing: 1px;
  }
  #asset-detail .basic-info table tr td:nth-of-type(1){
    color: #171717;
    padding-left: 2.2rem;
  }
  #asset-detail .basic-info table tr td:nth-of-type(2){
    color: #4A4A4A;
    padding-right: 2.5rem;
    text-align: right;
  }
  #asset-detail .asset-edit {
    position: fixed;
    right: 0.8rem;
    bottom: 0.8rem;
    display: block;
    width: 5rem;
    height: 5rem;
    z-index: 2;
  }
  #asset-detail .basic-info .ope-info {
    width: 100%;
    background: #fff;
  }
  #asset-detail .ope-info .ope-info-top{
    height: 2.25rem;
    line-height: 2.25rem;
    border: 1px solid #EEEEEE;
  }
  #asset-detail .ope-info .ope-info-top span{
    float: left;
    font-size: 1rem;
    color: #00CCCC;
    margin-left: 2.2rem;
  }
  #asset-detail .ope-info .ope-info-top img{
    float: right;
    width: 3rem;
  }
  #asset-detail .ope-info .ope-info-bottom{
    padding: 1rem 0;
  }
  #asset-detail .ope-info .ope-info-bottom span{
    float: left;
    font-size: 1.2rem;
    color: #171717;
    margin-left: 2.2rem;
  }
  #asset-detail .ope-info .ope-info-bottom img{
    float: right;
    width: 1rem;
    height: 1rem;
    margin-right: 1rem;
    margin-top: 0.2rem;
  }
  #downlist{
    height:9.7rem;
    width:100%;
    overflow:hidden;
  }
  #downlist li{
    width:88%;
    margin:1.1rem auto;
    display:flex;
    flex-direction: row;
    height:4rem;
    font-size:1.4rem;
  }

  #downlist li p{
    color:#999999;
  }
  #downlist li:nth-child(1) span{
    color:#171717;
    margin-left:1rem;
  }
  #downlist li:nth-child(2) .price{
    color:#FF5050;
    margin-left:1rem;
    font-size:1rem;
    width:8.5rem;
    display:flex;
    flex-direction: row;
  }
  #downlist li:nth-child(2) .price p{
    color:#FF5050;
    font-size:1.7rem;
  }
  #downlist li:nth-child(2) .price span{
    margin-top:0.6rem;
  }
</style>
